<template>
<el-form ref="big_form" :label-position=" 'right' " label-width="90px"
				 :inline="true">
	<!-- 日期范围 -->
	<el-form-item label="日期范围">
		<el-date-picker
			v-model="chart1_use_data.datetime"
			type="daterange"
			range-separator="-"
			start-placeholder="Start date"
			end-placeholder="End date"
			value-format="YYYY-MM-DD"
		/>
	</el-form-item>
	<el-form-item label="处理方">
		<el-radio-group v-model="chart1_use_data.trend">
			<el-radio-button :label="false">入库</el-radio-button>
			<el-radio-button :label="true">出库</el-radio-button>
		</el-radio-group>
	</el-form-item>
	<el-form-item>
		<el-button type="primary" @click="chart1()">提交</el-button>
	</el-form-item>
</el-form>
<el-row :gutter="20">
	<el-col :span="14">
		<el-space wrap>
			<div v-for="i in chart1_data">
				<el-card shadow="always"> {{ i.name }}: &nbsp;{{ i.value }}元</el-card>
			</div>
		</el-space>
	</el-col>
	<el-col :span="10">
		<v-chart class="chart" :option="chart1_option" :autoresize="true"/>
	</el-col>
</el-row>
</template>

<script setup lang="ts">

import VChart from "vue-echarts";
import {computed, reactive, ref} from "vue";
import {HandlePieResponseData, HandlePieResult} from "@/api/first/DataAnalysis/type.ts";
import {ElMessage} from "element-plus";
import {reqHandlePie} from "@/api/first/DataAnalysis";
import { EChartsOption } from 'echarts'
const chart1_use_data = reactive({
	datetime: null,
	trend: false
})
const chart1_data = ref<HandlePieResult[]>([])
const chart1 = () => {
	if (chart1_use_data.datetime === null) {
		ElMessage.warning('请选择时间')
		return
	}
	let date_start: string = chart1_use_data.datetime[0]
	let date_stop: string = chart1_use_data.datetime[1]
	reqHandlePie({
		start_date: date_start,
		end_date: date_stop,
		trend: chart1_use_data.trend
	}).then((result: HandlePieResponseData) => {
		chart1_data.value = result.list
		ElMessage.success(result.success?.message)
	})
}
const chart1_option = computed<EChartsOption>(() => {
	return {
		toolbox: {
			feature: {
				saveAsImage: {}
			}
		},
		title: {
			text: "大类零件库存价值占比",
			left: "center"
		},
		tooltip: {
			trigger: "item",
			formatter: "{a} <br/>{b} : {c} ({d}%)"
		},
		legend: {
			orient: "vertical",
			left: "left",
		},
		series: [
			{
				name: "名称 库存价值（占比）",
				type: "pie",
				radius: "55%",
				center: ["50%", "60%"],
				data: chart1_data.value,
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: "rgba(0, 0, 0, 0.5)"
					}
				}
			}
		]
	}
})
</script>

<style scoped>
.chart {
	height: 400px;
}
</style>